import React,{useEffect} from 'react';
import styles from './banji.less';
import '../../../../src/global.css'
import { Table,Form, Input, Button, Popconfirm } from 'antd';
import { useDispatch,useSelector } from 'react-redux';
import { ClassModelState } from '@/models/class.module'
import { classList } from '@/interface/class'
import { useState } from 'react';


let Jiaoshi:React.FC =function() {

  let dispatch = useDispatch()
  useEffect(() => {
    dispatch({
      type: 'classManage/roomManage'
    })
  }, [])

  const {roomList} = useSelector((model:{classManage:ClassModelState})=>model.classManage)
  // console.log(roomList)

  const columns = [
    {
      title: '教室号',
      dataIndex: 'room',
      key: 'room',
    },
    {
      title: '操作',
      key: 'action',
      render: (text:any) => (
        <Popconfirm placement="top" title='确定删除吗' onConfirm={()=>deleteRoom(text.key)} okText="确定" cancelText="取消">
          <span>删除</span>
        </Popconfirm>
      ),
    },
  ];
  const deleteRoom=(id:string)=>{
    dispatch({
      type: 'classManage/deleteRoomList',
      payload: {
        room_id: id
      }
    })
  }

  let data:classList[] = [];
  roomList.map(item=>{
    data.push({
      key: item.room_id,
      room: item.room_text
    })
  })

  const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };
  const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
  };


  const [form] = Form.useForm();
 //弹框的开关
  let [isFlag,setFlag] = useState<boolean>(false)
  //打开弹框
  const showBlock=()=>{
    setFlag(true)
  }
  //取消弹框
  const cancel = () =>{
    setFlag(false)
  }


  const onFinish = (values: any) => {
    // console.log(values);
    dispatch({
      type: 'classManage/addRoomList',
      payload: {
        room_text: values.room
      }
    })
    setFlag(false)
    form.resetFields();
  };




  return (
    <div className={styles.classContainer}>
      <h2>教室管理</h2>
      <div className={styles.classBox}>
        <Button type="primary" onClick={showBlock}><b>+</b> 添加教室</Button>
        <Table columns={columns} dataSource={data} />
      </div>
       {/* 添加教室 */}
       {isFlag ?
      <div className={styles.addRoom}>
        <div className={styles.addTitle}>
          <b>添加教室</b><span onClick={cancel}>X</span>
        </div>
        <div className={styles.addCon}>
          <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
            <Form.Item name="room" label="教室号" rules={[{ required: true }]}>
              <Input placeholder="教室名"/>
            </Form.Item>
            
            <Form.Item {...tailLayout}>
              <Button htmlType="button" onClick={cancel}>
                取消
              </Button>
              <Button type="primary" htmlType="submit">
                提交
              </Button>
            </Form.Item>
          </Form>
        </div>
        
      </div>:<></>
    }

    
  </div>
  );
}
export default Jiaoshi
